<template>
  <LayoutTopBottom :show-header="true" :show-footer="false">
    <template #header>
      <div class="header-title">
        <div class="contact-name no-drag">公众号</div>
      </div>
    </template>

    <!-- body -->
    <template #body>
      <LayoutScroll>
        <template #item>
          <div class="offical-account-container">
            <div
              class="offical-account"
              v-for="item in officalAccountList"
              :key="item.id"
            >
              <!-- 头像 -->
              <el-avatar
                class="offical-account-avatar"
                :size="50"
                :src="item.avatar"
              />

              <div class="offical-account-name">{{ item.name }}</div>
            </div>
          </div>
        </template>
      </LayoutScroll>
    </template>
  </LayoutTopBottom>
</template>

<script setup lang="ts">
import { ref } from "vue";
import LayoutTopBottom from "@/components/layout/LayoutTopBottom.vue";
import LayoutScroll from "@/components/layout/LayoutScroll.vue";

const officalAccountList = ref<any>([]);

const getOfficalAccountList = () => {
  const list = [];
  for (let i = 0; i < 20; i++) {
    list.push({
      id: i + 1,
      avatar: "https://edu-make.oss-cn-shanghai.aliyuncs.com/avatar.jpg",
      name: "官方账号1",
    });
  }

  officalAccountList.value = list;
};

getOfficalAccountList();
</script>

<style scoped lang="scss">
.header-title {
  height: 60px;
  padding: 0px 0 12px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e7e7e7;
}

.offical-account-container {
  width: 100%;
  height: 100%;
  padding: 24px 78px 24px 78px;


  .offical-account {
    width: 67px;
    height: 108px;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: #e6e6e6;
      cursor: pointer;
    }

    .offical-account-avatar {
      margin-bottom: 13px;
    }

    .offical-account-name {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 13px;
      color: #969696;
      overflow: hidden;
    }
  }
}
</style>
